<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
</head>
<style>

body {
    margin: 0;
    padding: 0;
}

.header_top_left {
    margin-left: 100px;
}

.header_top {
    width: 100%;
    height: 34px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #e5e5e5;
    line-height: 34px;
    font-size: 12px;
    color: #6c6c6c;
}

.header_top_left_txt {
    margin-left: 20px;
}

.denglu {
    margin-left: 10px;
    color: #6c6c6c;
    text-decoration: none;
}

.zhuce {
    margin-left: 10px;
    color: #6c6c6c;
    text-decoration: none;
}

a:hover {
    color: red;
}

.dizhi {
    width: 130px;
    height: 20px;
    background: #fff;
    margin-top: 7px;
    margin-left: 10px;
}

/*-----------------------------------*/
.header_top_right {
    float: right;
    margin-right: 50px;
}




.tel {
    margin: 10px;
    padding-bottom: 8px;
    margin: 0;
    padding: 0;
    margin-left: 10px;
    margin-top: 1px;
    margin-right: 10px;
}

.header_center {
    width: 100%;
    height: 150px;
}

.header_center_leftimg {
    width: 176px;
    height: 92px;
    margin-left: 70px;

}

.header_center_leftimg img {
    vertical-align: middle;
    padding-top: 30px;
}

.header_center_centerimg {
    width: 167px;
    height: 31px;

}

.header_center_centerimg img {
    width: 167px;
    height: 31px;
    padding-top: 50px;
    margin-left: 70px;
}

/*--------------------*/
.searchCon {
    margin: 0;
    padding: 0;
    float: left;
    margin-top: 45px;
    width: 580px;
    height: 50px;
    margin-left: 130px;
}

.searchBar {
    height: 34px;
    width: 574px;
    overflow: hidden;
    border: 3px solid #fc4c65;
    border-radius: 4px;
}

.searchInput {
    float: left;
    height: 34px;
    width: 470px;
    padding-left: 4px;
    border: 0px;
    color: #999;
    line-height: 34px;
}

.searchBtn {
    float: left;
    border: 0px;
    width: 100px;
    height: 34px;
    line-height: 34px;
    background-color: #fc4c65;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.searchCon .hotSearch {
    height: 24px;
    line-height: 24px;
    width: 580px;
    overflow: hidden;
}

.searchCon .hotSearch a {
    margin-right: 6px;
    color: #999;
    font-size: 12px;
}

a:link,
a:visited {
    color: #777777;
    text-decoration: none !important;
}

.Cart {
    float: right;
    border: 1px solid #d8d8d8;
    background-color: #f9f9f9;
    width: 130px;
    height: 38px;
    line-height: 38px;
    margin-top: 45px;
    position: relative;
    margin-right: 90px;
}

.header_center .Cart a {
    position: absolute;
    top: 50%;
    left: 0px;
    height: 14px;
    margin-top: -7px;
    font: 14px/1 sans-serif;
}

.Cart i.cartIcon {
    padding-left: 0px;
    word-spacing: 1.5em;
    background: url(../images/shoppingCart.png) no-repeat center 0px;
}

.Cart i {
    padding-left: 10px;
}

i {
    font-style: italic;
}

.w {
    width: 1200px;
    margin: 0 auto;
    clear: both;
    position: relative;
}

/*---------------*/

.header_center2 {
    width: 100%;
    height: 50px;
    float: left;
    margin-top: 20px;
    border-bottom: 4px solid #fc4c65
}

.header_centeroption1 {
    display: block;
    width: 221px;
    height: 38px;
    color: #333;
    text-align: center;
    font: 16px/30px "黑体";
    line-height: 38px;
    margin-left: 70px;
    background: #fc4c65;
    color: #fff;
    margin-top: 13px;
    float: left;
}

.header_centeroption2 {
    float: left;
}

.header_centeroption2 div {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    float: left;
    margin-top: 15px;
    margin-right: 20px;
}

.header_centeroption2 .header_centeroption2tu {
    margin-top: 26px;
    margin-right: -20px;
}



</style>

<body>
    <div class="header_top">
        <div class="header_top_left" style="float: left">
            <div class="dt" style="float: left">送至:</div>
            <div class="dizhi" style="float: left">

            </div>
            <span class="header_top_left_txt" style="float: left">欢迎来到风尚购物</span>
            <a href="" class="denglu">登陆</a>
            <a href="" class="zhuce">注册</a>
        </div>

        <div class="header_top_right">
            <div class="container" style="float: left">
                <a>我的风尚</a>
            </div>

            <span class="tel" style="float: left">4001-677-077</span>

            <div class="container" style="float: left">
                <a>客服中心</a>
            </div>
        </div>

    </div>
    <div class="header_center wp">
        <div clas="w">
            <div class="header_center_leftimg" style="float: left">
                <a href=""><img src="./images/FSLogo.png" alt=""></a>
            </div>
            <div class="header_center_centerimg" style="float: left">
                <img src="./images/freeCarry.jpg" alt="">
            </div>
            <div class="searchCon">
                <div class="searchBar">
                    <input type="text" value="请输入商品关键词或者货号" class="searchInput" name="searchKeyWord">
                    <input type="button" class="searchBtn" id="BtnSearch" value="搜索">
                    <input type="display:none">
                </div>
                <div class="hotSearch">
                    <div style="display:none"></div>
                    <a href="#">鞋子</a>
                    <a href="">唯怡床品</a>
                    <a href="">空气炸锅</a>
                    <a href="">零食</a>
                    <a href="">酒</a>
                    <a href="">羽绒服</a>
                    <a href="">牛肉</a>
                </div>
            </div>
            <div class="Cart">
                <a href="#">
                    <i class="cartIcon">&nbsp;</i>
                    我的购物车
                    <i>></i>
                </a>
            </div>
        </div>

        
            </div>
</body>

</html>